<script setup>
  import {
    DelCategoryAPI,
    AddDataAPI,
    GetListAPI,
    EditDataAPI,
    GetViewAPI,
    DelDataAPI,
  } from "@/api/system/team";
  import SubmitForm from "./submitForm.vue";
  const { proxy } = getCurrentInstance();

  /**
   * 字典查询
   */
  const { sys_tool_staus } = proxy.useDict("sys_tool_staus");

  /**
   * 模糊查询枚举
   */
  const selectList = ref([
    { type: "日期范围" },
    { label: "班组名称", model: "groupName", type: "输入框" },
    { label: "班组编码", model: "groupCode", type: "输入框" },
  ]);
  /**
   * 表单实例
   */
  const ruleFormRef = ref(null);
  /**
   * 表单
   */
  const ruleForm = ref({});
  /**
   * 表格枚举
   */
  const columns = ref([
    { label: "班组编码", prop: "teamCode", width: "200" },
    { label: "班组名称", prop: "teamName", width: "200" },
    { label: "负责人", prop: "teamChargePerson", width: "200" },
    { label: "成员", prop: "teamMember", width: "200" },
    { label: "创建人", prop: "createBy", width: "230" },
    { label: "创建时间", prop: "createTime", width: "250" },

    { label: "操作", prop: "x" },
  ]);

  /**
   * 按钮枚举
   */
  const buttonList = ref([
    { type: "add", hasPermi: "system:team:add" },
    { type: "import", hasPermi: "system:team:import" },
    { type: "export", hasPermi: "system:team:export" },
  ]);

  /**
   * 表格数据
   */
  const tableData = ref([]);

  /**
   * 表单实例
   */
  const submitFormRef = ref(null);

  /**
   * 一级类别列表
   */
  const categoryList = ref([]);
  /**
   * 新增修改表单
   */
  const submitForm = ref({});

  /**
   * 查询表单
   */
  const query = reactive({
    pageNum: 1,
    pageSize: 10,
  });

  /**
   * 表单校验
   */
  const rules = reactive({
    categoryName: [
      { required: true, message: "请填写类别名称", trigger: "change" },
    ],
  });
  /**
   * 各种状态
   */
  const state = reactive({
    loading: false,
    total: 0,
    btnLoading: false,
    isShow: false,
    title: "新增",
    row: [],
    ids: [],
    treeShow: false, //树结构弹窗
  });

  /**
   * 新增弹窗
   */
  const addDic = () => {
    state.title = "新增";
    state.isShow = true;
  };

  /**
   * 修改弹窗
   */
  const editDic = async (id) => {
    try {
      state.btnLoading = true;
      const { data: result } = await GetViewAPI(id);
      submitForm.value = result;
      state.title = "修改";
      state.isShow = true;
    } catch (err) {
      console.error(err);
    } finally {
      state.btnLoading = false;
    }
  };

  /**
   * 查看弹窗
   */
  const lookDic = async (id) => {
    try {
      state.btnLoading = true;
      const { data: result } = await GetViewAPI(id);
      submitForm.value = result;
      state.title = "查看";
      state.isShow = true;
    } catch (err) {
      console.error(err);
    } finally {
      state.btnLoading = false;
    }
  };

  /**
   * 弹窗关闭
   */
  const closeDic = () => {
    state.isShow = false;
    state.treeShow = false;
    submitForm.value = {};
    ruleForm.value = {};
  };

  /**
   * 新增
   */
  const addSub = async () => {
    try {
      state.btnLoading = true;
      const result = await submitFormRef.value.submit();
      if (!result) return
      await AddDataAPI(result);
      closeDic();
      proxy.successMsg("新增成功");
      getList();
    } catch (err) {
      console.error(err);
    } finally {
      state.btnLoading = false;
    }
  };

  /**
   * 修改
   */
  const editSub = async () => {
    try {
      state.btnLoading = true;
      const result = await submitFormRef.value.submit();
      if (!result) return
      await EditDataAPI(result);
      closeDic();
      proxy.successMsg("修改成功");
      getList();
    } catch (err) {
      console.error(err);
    } finally {
      state.btnLoading = false;
    }
  };

  /**
   * 删除
   */
  const remove = async (id) => {
    try {
      proxy.loading("删除中，请稍后");
      await DelDataAPI(id);
      closeDic();
      proxy.successMsg("删除成功");
      getList();
    } catch (err) {
      console.error(err);
    } finally {
      proxy.closeLoading();
    }
  };

  /**
   * 模糊查询
   */
  const selectSubmit = (val) => {
    Object.keys(val).forEach((keyItem) => (selectList[keyItem] = val[keyItem]));
    getList();
  };

  /**
   * 列表复选框
   */
  const handleSelectionChange = ({ row, ids }) => {
    state.ids = ids;
    state.row = row;
  };

  /**
   * 查询列表
   */
  const getList = async () => {
    try {
      state.loading = true;
      const result = await GetListAPI(query);
      state.total = result.total;
      tableData.value = result.rows;
    } catch (err) {
      console.error(err);
    } finally {
      state.loading = false;
    }
  };
  getList();
</script>

<template>
  <div class="app-container">
    <!-- 查询条件组件 -->
    <p-select-form :selectForm="selectList" @selectSubmit="selectSubmit" />

    <el-card>
      <p-button :list="buttonList" @add="addDic" @export="proxy.download('/system/sysTeam/teamExport', {})"
        @import="getList" :url="'/system/sysTeam/teamExportError'" :templateUrl="'/system/sysTeam/download/excel'"
        :importUrl="'/system/sysTeam/importData'" />
      <!-- 表格数据 -->
      <p-table class="tableClass" :loading="state.loading" :data="tableData" :column="columns" :isSel="false"
        v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="state.total" @change="handleSelectionChange"
        @pagination="getList">
        <template #columnCell="{ column, record }">
          <p-Text v-if="column.prop == 'status'" :options="sys_tool_staus" :value="record.status" />
          <p-operate :list="[
              {
                icon: 'Edit',
                emit: 'edit',
                disabled: false,
                text: '修改',
                type: 'primary',
                hasPermi: 'system:team:edit',
              },
              {
                icon: 'DeleteFilled',
                emit: 'remove',
                disabled: false,
                text: '删除',
                isDel: true,
                type: 'danger',
                hasPermi: 'system:team:remove',
              },
            ]" v-if="column.prop == 'x'" @look="lookDic(record.id)" @edit="editDic(record.id)"
            @remove="remove(record.id)" />
        </template>
      </p-table>
    </el-card>

    <!-- 弹窗 新增-修改 -->
    <p-dialog v-model="state.isShow" :title="state.title" @ok="state.title == '新增' ? addSub() : editSub()"
      @close="closeDic" width="60%">
      <SubmitForm ref="submitFormRef" :data="submitForm" :title="state.title" :disabled="state.title == '查看'" />
    </p-dialog>
    <!-- 树结构类别 -->
    <p-dialog v-model="state.treeShow" :title="state.title" @ok="addTreeSub()" @close="closeDic" width="30%">
      <el-form :model="ruleForm" label-width="120px" :rules="rules" status-icon inline ref="ruleFormRef">
        <el-form-item label="类型名称" prop="categoryName">
          <el-input clearable v-model="ruleForm.categoryName" />
        </el-form-item>
        <el-form-item label="刀具类型">
          <p-select :option="categoryList" v-model="ruleForm.parentId" placeholder="请选择维保级别" />
        </el-form-item>
      </el-form>
    </p-dialog>
  </div>
</template>

<style scoped lang="scss">
  .card-tree {
    height: 30rem;
    overflow: auto;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
  }
</style>